<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="/admin/_layouts/default">
<head>
    <title>上传邮件模版</title>
</head>
<body>
<div layout:fragment="content">
    <div class="modal fade in" id="js-template-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
            </div>
        </div>
    </div>
    <!-- 内容区域 -->
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-xs-12 i-navbar">
                <a class="btn btn-primary" th:href="@{/admin/message/mail/index.html}" data-pjax><i
                        class="fa fa-arrow-left"></i> 返回
                </a>
            </div>
            <div class="col-xs-12">
                <!-- form start -->
                <form id="js-table"
                      th:action="@{/admin/message/mail/insert}"
                      method="POST">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="pull-left">上传邮件模版</h3>
                            <div class="pull-right">
                                <button type="submit" class="btn btn-primary">
                                    立即提交
                                </button>
                            </div>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body"
                             class="stepy">

                            <fieldset title="第一步">
                                <legend>必填</legend>

                                <div class="form-group">
                                    <label for="name">模版名称 <span class="i-label label-warning">必填</span></label>
                                    <input class="form-control" id="name" name="name"
                                           placeholder="请输入模版名称"
                                           required
                                           type="text">
                                </div>
                                <div class="form-group">
                                    <label for="defSubject">默认邮件主题 <span class="i-label label-warning">必填</span></label>
                                    <input class="form-control" id="defSubject" name="defSubject"
                                           placeholder="请输入默认主题名"
                                           required
                                           type="text">
                                </div>
                                <div class="form-group">
                                    <label>上传模版文件 <span class="i-label label-warning">必填</span></label>
                                    <div th:include="/admin/_widgets/upload-box::upload-box"
                                         th:with="id='UploadTemplate',var='fid',height=1,maxCount=1"></div>
                                    <p class="help-block">支持 thymeleaf 语法</p>
                                </div>
                            </fieldset>
                            <fieldset title="第二步">
                                <legend>选填</legend>

                                <div class="form-group">
                                    <label>图片及UID</label>
                                    <div th:include="/admin/_widgets/upload-box::upload-box"
                                         th:with="id='UploadImages',var='imagesId',height=3"></div>
                                    <p class="help-block">图片名即UID，如：logo.png</p>
                                </div>
                                <div class="form-group">
                                    <label>附件</label>
                                    <div th:include="/admin/_widgets/upload-box::upload-box"
                                         th:with="id='UploadFiles',var='filesId',height=3"></div>
                                </div>
                                <div class="form-group">
                                    <label for="param">设置参数及默认值 </label>
                                    <textarea class="form-control" id="param" name="param"
                                              style="height: 5em;"
                                    ></textarea>
                                    <p class="help-block">用行分割，格式如：name=hocgin</p>
                                </div>
                                <div class="form-group">
                                    <label for="description">说明 </label>
                                    <textarea class="form-control" id="description" name="description"
                                              style="height: 5em;"
                                    ></textarea>
                                </div>
                            </fieldset>
                            <button type="submit" class="stepy-finish btn btn-primary pull-right">完成</button>

                        </div>
                        <!-- /.box-body -->
                    </div>
                </form>
            </div>
        </div>
        <!-- /.row -->
    </section>
    <!-- /内容区域 -->
    <script>
        $(function () {

            // 分步骤
            $(".stepy").stepy({
                backLabel: "上一步",
                nextLabel: "下一步",
                block: false,
                legend: false,
                select: function (step) {
                }, finish: function () {
                }
            });

            $('#js-table').ajaxForm({
                dataType: 'json',
                beforeSubmit: function (arr, form, option) {
                    form.find("button:submit").attr('disable', true);
                },
                success: function (data, statusText, xhr, form) {
                    if (data.code === 200) {
                        form.resetForm(); // 重置表单
                        layer.msg(data.message, {icon: 1});
                    } else {
                        layer.msg(data.message, {icon: 2});
                    }
                    form.find("button:submit").attr('disable', false);
                }
            });
        });
    </script>
</div>
</body>
</html>
